<template>
    <Layout>
        <div>
            <span style="width:63px;height:17px;font-size:16px;font-family:Microsoft YaHei;
                         font-weight:400;margin-right:50px;margin-left: 15px;
                         color:rgba(41,82,159,0.91);
                         line-height:46px;">模板配置</span>
            <Button size="large" type="success" class="ivu-btn-save" icon="md-arrow-back" style="margin-bottom: 10px;margin-right: 13px" @click="goBack()">返回</Button>
            <hr/>
        </div>
        <div  ref="topDiv"  > <!--class="demo-split"-->
            <Split v-model="split">
                <div slot="left" class="demo-split-pane">
                    <div style="height: 100%;overflow-y: auto;overflow-x:hidden;background-color:#FFF;">
                        <Tree :style="{backgroundColor:'#FFF'}" :data="listData" :load-data="loadListData" :render="renderContent"></Tree>
                        <Dropdown trigger="click" style="margin-left:20px" placement="right-start"
                                  ref="contentMenu" @on-click="selectMenuItem">
                            <DropdownMenu slot="list">
                                <DropdownItem name="addPoint">新增</dropdownitem>
                                <DropdownItem name="editPoint">修改</dropdownitem>
                                <DropdownItem name="deletePoint">删除</dropdownitem>
                            </dropdownmenu>
                        </dropdown>
                    </div>
                </div>
                <div slot="right" class="demo-split-pane">
                     <div style="height:100%" class="modelSub">
                         <Col span="24">
                             <div class="left">采集项</div>
                             <div class="right">
                                 <Button size="large" class="ivu-btn-save" icon="md-add" style="margin-bottom: 10px;margin-right: 10px" @click="addFillItem()">新增</Button>
                                 <Button size="large" class="ivu-btn-delete" icon="md-trash" style="margin-bottom: 10px;margin-right: 10px" @click="batDeleteFillItem()">批量删除</Button>
                             </div>
                         </Col>
                         <Col span="24">
                             <Row>
                                 <Col>
                                     <CheckboxGroup v-model="checkFillDatas">
                                         <Row :class="rowIndex%2==0?detailRow1:detailRow2" v-for="(row,rowIndex) in fillDataList"  :key="row.fillItemId">
                                             <Col span="8" v-for="child in row" :key="child.itemId"  style="padding-left: 10px;border-right: 1px solid #E0E0EC;" >
                                                 <Checkbox  :label="child.fillItemId"  v-if="child.fillItemId!=undefined">
                                                     <span>{{child.itemName}}</span>
                                                 </Checkbox>
                                                 <Button v-if="child.fillItemId!=undefined" type="text" icon="md-remove-circle" @click="deleteFill(child)" style="margin-top: 10px;margin-right: 3px;float: right" ></Button>
                                                 <Button v-if="child.fillItemId!=undefined" type="text" icon="ios-create" @click="toEditFill(child)" style="margin-top: 10px;margin-right: 3px;float: right" ></Button>
                                             </Col>
                                         </Row>
                                     </CheckboxGroup>
                                 </Col>
                             </Row>
                         </Col>
                      </div>
                </div>
            </Split>
        </div>
        <Modal :transfer=false  v-model="listModel"  :width=600 style="display: flex; align-items: center; justify-content: center;">
            <Form ref="listFormData" :model="listFormData" :rules="listRuleValidate"  :label-width="160">
                <Row v-if="listFormData.parentItemName != ''">
                    <Col span="20" >
                        <FormItem label="上级检查项目:" prop="parentItemName">
                            <Input v-model="listFormData.parentItemName" :readonly="true" disabled ></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row v-if="listFormData.listItemId != ''">
                    <Col span="20" >
                        <FormItem label="序号:" prop="seq">
                            <Input v-model="listFormData.seq" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row >
                    <Col span="20" >
                        <FormItem label="检查项目:" prop="itemName">
                            <Input type="textarea" autosize v-model="listFormData.itemName" />
                        </FormItem>
                    </Col>
                </Row>
                <!--<Row >-->
                  <!--<Col span="20" >-->
                      <!--<FormItem label="检查内容:" prop="writeDesc">-->
                          <!--<Input type="text" v-model="listFormData.writeDesc" ></Input>-->
                      <!--</FormItem>-->
                  <!--</Col>-->
                <!--</Row>-->
               <Row >
                 <Col span="20" >
                     <FormItem label="标准值:" prop="standardValue">
                         <Input type="text" v-model="listFormData.standardValue" ></Input>
                     </FormItem>
                 </Col>
               </Row>
               <!-- <Row >
                    <Col span="20">
                        <FormItem>
                            <Button type="primary"  class='ivu-btn-save' @click="saveListData()" >保存</Button>
                            <Button type="primary"  class='ivu-btn-cancel' @click="handleListCancel"  style="margin-left: 2px">取消</Button>
                        </FormItem>
                    </Col>
                </Row>-->
            </Form>
            <div slot="footer">
                <Button type="primary"  class='ivu-btn-save' :loading="buttonLoading" @click="saveListData()" >保存</Button>
                <Button type="primary"  class='ivu-btn-cancel' @click="handleListCancel"  style="margin-left: 2px">取消</Button>
            </div>
        </Modal>
        <Modal :transfer=false  v-model="fillModel"  :width=600 style="display: flex;align-items: center; justify-content: center;">
            <Form v-if="fillFormShow" ref="fillFormData" :model="fillFormData" :rules="fillRuleValidate"  :label-width="120" :key="'fillFormData1'">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="20" >
                        <FormItem label="采集项名称:" prop="itemName" >
                            <Input type="text" v-model="fillFormData.itemName" ></Input>
                        </FormItem>
                    </Col>

                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="20">
                        <!--<FormItem label="数据类型:" prop="dataType" >
                            <Select filterable  v-model="fillFormData.dataType"  @on-change="changeCiteDataType(citeFormData.dataType)">
                                <Option v-for="item in dataTypeData" :value="item.codingCodeId" :key="item.codingCodeId" >{{ item.codingName }}</Option>
                            </Select>
                        </FormItem>-->
                        <FormItem label="数据类型:" prop="dataType" >
                            <Select filterable  v-model="fillFormData.dataType">
                                <Option value ='1000001013000000005'>拍照型</Option>
                                <Option value ='1000001013000000004'>数值型</Option>
                                <Option value ='1000001013000000002'>文本型</Option>
                                <Option value ='1000001013000000006'>单选型</Option>
                                <!--<Option value ='1000001013000000007'>复选型</Option>-->
                            </Select>
                        </FormItem>
                    </Col>

                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="20" >
                        <FormItem label="序号:" prop="seq">
                            <Input type="text" v-model="fillFormData.seq" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row v-if="showUrl" type="flex" justify="space-around" class="code-row-bg">
                      <Col span="23" >
                          <FormItem label="URL:" prop="codeUrl">
                              <Input type="text" v-model="fillFormData.codeUrl" ></Input>
                          </FormItem>
                      </Col>
                </Row>
                <Row v-if="showCodeUrl" type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23" style="padding-right: 5px">
                        <FormItem label="编码大类:" prop="codeUrl">
                            <Select filterable  v-model="fillFormData.codeUrl" >
                                <Option v-for="item in codeSortData" :value="item.codingSortId" :key="item.codingSortId" >{{ item.codingSortName }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                 <!--<Row  type="flex" justify="space-around" class="code-row-bg">
                   <Col span="11" >
                         <FormItem label="展示方式" prop="showStyle">
                             <Select v-model="fillFormData.showStyle">
                                <Option value="0">首页展示</Option>
                                <Option value="1">换页展示</Option>
                                <Option value="2">隐藏</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="11" >
                        <FormItem label="别名:" prop="anotherName">
                            <Input type="text" v-model="fillFormData.anotherName" ></Input>
                        </FormItem>
                    </Col>
                    <Col span="11" >
                        <FormItem label="长度:" prop="dataLength">
                            <Input type="text" v-model="fillFormData.dataLength" ></Input>
                        </FormItem>
                    </Col>
                    <Col span="11" >
                    </Col>
                </Row>-->
            </Form>
            <Form style="margin-top:5px;" ref="dataCheckForm" :model="dataCheckForm" :label-width="120">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23" style="background-color:#F0F0F0;text-align:center;font-size: 16px;">
                        数据校验
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <!--<Col span="11" >
                        <FormItem label="默认值:" prop="defaultValue">
                            <Input type="text" v-model="dataCheckForm.defaultValue" ></Input>
                        </FormItem>
                    </Col>-->
                    <Col span="20" >
                        <FormItem label="是否必填" prop="ifNull">
                            <Select v-model="dataCheckForm.ifNull">
                                <Option value="1">是</Option>
                                <Option value="0">否</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="11" >
                    </Col>
                </Row>
               <!-- <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11" >
                        <FormItem label="必须拍照取证" prop="ifCamera">
                            <Select v-model="dataCheckForm.ifCamera">
                                <Option value="1">是</Option>
                                <Option value="0">否</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="11" >
                    </Col>
                </Row>-->
               <!-- <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23">
                        <FormItem>
                            <Button type="primary"  class='ivu-btn-save' :loading="buttonLoading" @click="saveItemData()" >确定</Button>
                            <Button type="primary"  class='ivu-btn-cancel' @click="handleCancel"  style="margin-left: 2px">取消</Button>
                        </FormItem>
                    </Col>
                </Row>-->
            </Form>
            <div slot="footer">
                <Button type="primary"  class='ivu-btn-save' :loading="buttonLoading" @click="saveItemData()" >确定</Button>
                <Button type="primary"  class='ivu-btn-cancel' @click="handleCancel"  style="margin-left: 2px">取消</Button>
            </div>
        </Modal>
    </Layout>
</template>
<script>
    import {sessionStorage} from '../../../../common/cacheUtils.js';
    import {Api} from '../../../../api/index.js'
    import Vue from 'vue'
    export default {
        data: function () {
            return{
                split: 0.35,
                listModel: false,
                fillModel:false,
                fillFormShow:false,
                modelVersionId:this.$route.params.data.modelVersionId,
                listSeq:'',buttonLoading: false,
                selectOrgTypes:[],
                orgLevels: [],
                codeSortData : [],
                orgTypes: [],
                listData:[
                    {
                        title: this.$route.params.data.modelName,
                        listItemId: null,
                        expand: true,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    cursor: 'pointer',
                                },
                                on: {
                                    click: () => {
                                        this.addListData(root,node,data)
                                    },
                                    //右键点击事件
                                    contextmenu: (e) => {
                                        e.preventDefault();
                                        this.addListData(root,node,data);
                                    },
                                }
                            }, [h('span', [h('Icon', {
                                props: {
                                    type: 'ios-paper-outline'
                                },
                                style: {
                                    marginRight: '8px'
                                }
                            }), h('span', data.title)])]);
                        },
                        children: []
                    }
                ],
                buttonProps: {
                    type: 'default',
                    size: 'small',
                },
                listFormData:{
                    listItemId:'',
                    itemName:'',
                    modelVersionId:this.modelVersionId,
                    parentId:'',
                    parentItemName:'',
                    standardValue:'',
                    writeDesc:'',
                    seq:''
                },
                fillFormData:{
                    fillItemId:'',
                    itemName:'',
                    modelVersionId:this.modelVersionId,
                    dataType:'',
                    showStyle:'',
                    dataLength:'',
                    codeUrl:'',
                    seq:''
                },
                dataCheckForm:{
                    dataCheckId:'',
                    defaultValue:'',
                    ifNull:'',
                    numberUpper:'',
                    numberLower:'',
                    decimalLength:'',
                    numberIncrement:'',
                    dateUpper:'',
                    dateLower:'',
                    dataFormat:'',
                    ifCamera:''
                },
                listRuleValidate:{
                    itemName:[{required: true, message: ' ', trigger: 'change'}],
                    writeDesc:[{required: true, message: ' ', trigger: 'change'}]
                },
                citeRuleValidate:{
                    itemName:[ {required: true, message: ' ', trigger: 'change'} ],
                    dataType:[ {required: true, message: ' ', trigger: 'blur,change'} ]
                },
                fillRuleValidate:{
                    itemName:[ {required: true, message: ' ', trigger: 'change'} ],
                    dataType:[ {required: true, message: ' ', trigger: 'blur,change'} ]
                },
                currentNode:null, //当前操作的节点
                parentNode:null,
                dataTypeData:[],
                detailRow1: 'detailRow1',
                detailRow2:'detailRow2',
                fillDataList:[],
                showUrl:false,
                showCodeUrl:false,
                checkFillDatas:[]
            }
        },
        mounted: function () {
            this.$refs.topDiv.style.height = (window.innerHeight - 180) + 'px';
            this.initListTreeData();
            this.queryFillDetail();
            this.selectCodingSort();
        },
        methods: {
            goBack(){
                this.$router.back();
            },
            selectCodingSort() {
                this.$http.get(Api.queryCodeDetailBySortId + '/1000001013', {params: {}}).then((res) => {
                    this.dataTypeData = res.data.data;
                })
                this.$http.get(Api.getCodingSort, {params: {}}).then((res) => {
                    this.codeSortData = res.data;
                })

            },
            initListTreeData(){
                let _this = this;
                let parentId = "";
                this.$http.get(Api.getListItemByParentId + "?parentId="+parentId+"&modelVersionId="+this.modelVersionId).then((res) => {
                    if(res.data!=null){
                        console.log(res.data)
                        res.data.map(node=>{
                            node.loading=false;
                            node.children=[];
                        })
                        _this.listData[0].children=res.data;
                    }

                }, function () {
                    _this.$Message.info('获取机构信息失败');
                });
            },
            restListTreeData(parentId){
                let _this = this;
                this.$http.get(Api.getListItemByParentId + "?parentId="+parentId+"&modelVersionId="+this.modelVersionId).then((res) => {
                    if(res.data!=null){
                        res.data.map(node=>{
                            node.loading=false;
                            node.children=[];
                        })
                    }
                    this.parentNode.children=res.data;
                }, function () {
                    _this.$Message.info('获取机构信息失败');
                });
            },
            loadListData(item, callback){
                let _this = this;
                this.$http.get(Api.getListItemByParentId + "?parentId="+item.listItemId+"&modelVersionId="+this.modelVersionId).then((res) => {
                    if(res.data!=null){
                        res.data.map(node=>{
                            node.loading=false;
                            node.children=[];
                        })
                        callback(res.data);
                    }

                }, function () {
                    this.$Message.info('获取机构信息失败');
                });
            },
            saveListData(){
                let _this=this;
                this.$refs.listFormData.validate((valid) => {
                    if (valid) {
                        _this.buttonLoading=true
                        _this.listFormData.writeDesc = '' //检查内容默认给空
                        let updateDatas = {};
                        if(_this.listFormData.listItemId==''){
                            updateDatas.listItem = Object.assign(JSON.parse(sessionStorage('paramUserInfo').get('userInfo')), _this.listFormData);
                         }else{
                            updateDatas.listItem = _this.listFormData;
                         }
                         this.$http.post(Api.saveOrUpdateListItem,updateDatas).then((res) => {
                            if(res.data.result=="success"){
                                _this.$Message.info("保存成功!");
                                let listItemId = res.data.listItemId;
                                if(_this.listFormData.listItemId==''){
                                    //以下如更新节点
                                    const children = _this.currentNode.children || [];
                                    children.push({
                                        itemName:_this.listFormData.itemName,
                                        listItemId:listItemId,
                                        expand: true
                                    });
                                    this.$set(_this.currentNode, 'children', children);
                                }else{
                                    if(_this.listSeq == _this.listFormData.seq) this.$set(_this.currentNode,'itemName',_this.listFormData.itemName);
                                    else _this.restListTreeData(_this.parentNode.listItemId);
                                }
                            }else{
                                _this.$Message.info("保存失败！");
                            }
                            _this.handleListCancel();
                             _this.buttonLoading=false
                        }, function () {
                             _this.buttonLoading=false
                            _this.$Message.info('保存失败!');
                        });
                    }else {
                         this.$Message.error('请填报完整!');
                     }
                })
            },
            handleListCancel() {
                this.listModel = false;
            },

            renderContent(h, {root,node,data}){
                return h('span', {
                    style: {
                        display: 'inline-block',
                        cursor: 'pointer',
                    },
                    on: {
                        click: () => {
                            this.selectNodeInfo = data;
                            this.selectNode = node;
                            this.selectRoot = root;
                        },
                        //右键点击事件
                        contextmenu: (e) => {
                            e.preventDefault();
                            this.selectNodeInfo = data;
                            this.selectNode = node;
                            this.selectRoot = root;

                            this.$refs.contentMenu.$refs.reference = event.target;
                            this.$refs.contentMenu.currentVisible = !this.$refs.contentMenu.currentVisible;
                        },
                    }
                }, [h('span', [h('Icon', {
                    props: {
                        type: 'ios-paper-outline'
                    },
                    style: {
                        marginRight: '8px'
                    }
                }), h('span', data.itemName)])]);
            },

            selectMenuItem(name){
                if(name == "addPoint"){
                    this.addListData(this.selectRoot, this.selectNode,this.selectNodeInfo);
                }
                if(name == "editPoint"){
                    this.toEditListData(this.selectRoot, this.selectNode,this.selectNodeInfo);
                }
                if(name == "deletePoint"){
                    this.removeList(this.selectRoot, this.selectNode,this.selectNodeInfo);
                }
            },

            addListData(root,node,data) {
                this.listModel=true;
                this.currentNode=data;
                this.$refs.listFormData.resetFields();
                this.listFormData = {};
                this.listFormData.listItemId="";
                this.listFormData.parentId=data.listItemId;
                this.listFormData.modelVersionId=this.modelVersionId;
                this.listFormData.parentItemName=data.itemName == null ? '':data.itemName;
            },
            toEditListData (root,node,data) {
                this.currentNode=data;
                const parentKey = root.find(el => el === node).parent;
                const parent = root.find(el => el.nodeKey === parentKey).node;
                this.parentNode = parent;
                let parentItemName =  (parent.title == this.$route.params.data.modelName ? "":parent.itemName);
                this.$http.get(Api.getListItemById +data.listItemId).then((res) => {
                    if(res.data.listItem!=null){
                        let listItem = res.data.listItem;
                        this.listFormData.listItemId=listItem.listItemId;
                        this.listFormData.itemName=listItem.itemName;
                        this.listFormData.seq=listItem.seq;
                        this.listSeq=listItem.seq;
                        this.listFormData.parentId=listItem.parentId;
                        this.listFormData.parentItemName=parentItemName;
                        this.listFormData.writeDesc=listItem.writeDesc;
                        this.listFormData.standardValue=listItem.standardValue;
                        this.listModel=true;
                    }
                }, function () {
                    this.$Message.info('获取信息失败');
                });

            },
            removeList (root, node, data) {
                let _this= this;
                let config={
                    title:'系统提示',
                    content:'确认删除此数据吗?',
                    okText:'确定',
                    cancelText:'取消',
                    onOk:function(){
                        _this.$Spin.show({
                            render: (h) => {
                                return h('div', [
                                    h('Icon', {
                                        'class': 'demo-spin-icon-load',
                                        props: {
                                            type: 'ios-loading',
                                            size: 18
                                        }
                                    }),
                                    h('div', 'Loading')
                                ])
                            }
                        });
                        this.$http.get(Api.deleteListItem+data.listItemId).then((res) => {
                            if(res.data.result=="success"){
                                _this.$Message.success({content:'删除成功!'})
                                const parentKey = root.find(el => el === node).parent;
                                const parent = root.find(el => el.nodeKey === parentKey).node;
                                const index = parent.children.indexOf(data);
                                parent.children.splice(index, 1);
                                if(parent.children.length==0){
                                    Vue.delete(parent,'children')
                                    Vue.delete(parent,'loading')
                                }
                            }else{
                                _this.$Message.error({content:res.data.msg,duration: 3, closable: true})
                            }
                            _this.$Spin.hide();
                        }, function () {
                            _this.$Spin.hide();
                            _this.$Message.error('删除失败');
                        });
                    },
                    onCancel:function(){
                    }
                }
                this.$Modal.confirm(config);
            },
            handleCancel() {
                this.fillModel = false;
            },
            addFillItem() {
                this.fillModel = true;
                this.citeFormShow = false;
                this.fillFormShow = true;
                this.fillFormData = {};
                this.fillFormData.fillItemId="";
                setTimeout(()=>{
                    this.showUrl = false;
                    this.showCodeUrl = false;
                },100);
                this.fillFormData.modelVersionId=this.modelVersionId;
                this.fillFormData.showStyle="1";
                this.dataCheckForm = {};
                this.dataCheckForm.dataCheckId="";
                this.dataCheckForm.ifCamera="0";
                this.dataCheckForm.ifNull="0";
                this.$refs.fillFormData.resetFields();
            },
            changeCiteDataType(dataType){
                if("1000001013000000010" == dataType){
                    this.showUrl = true;
                    this.showCodeUrl = false;
                }else if("1000001013000000009" == dataType){
                    this.showUrl = false;
                    this.showCodeUrl = true;
                }else {
                    this.showUrl = false;
                    this.showCodeUrl = false;
                }
            },
            saveItemData(){
                if(this.fillFormShow == true) this.saveFillData();
            },
            saveFillData(){
                this.$refs.fillFormData.validate((valid) => {
                    if (valid) {
                        let updateDatas = {};
                        if(this.fillFormData.fillItemId==''){
                           updateDatas.fillItem = Object.assign(JSON.parse(sessionStorage('paramUserInfo').get('userInfo')), this.fillFormData);
                        }else{
                            updateDatas.fillItem = this.fillFormData;
                        }
                        if(this.dataCheckForm.dataCheckId==''){
                           updateDatas.dataCheck = Object.assign(JSON.parse(sessionStorage('paramUserInfo').get('userInfo')), this.dataCheckForm);
                        }else{
                            updateDatas.dataCheck = this.dataCheckForm;
                        }

                        this.$Spin.show({
                            render: (h) => {
                                return h('div', [
                                    h('Icon', {
                                        'class': 'demo-spin-icon-load',
                                        props: {
                                            type: 'ios-loading',
                                            size: 18
                                        }
                                    }),
                                    h('div', 'Loading')
                                ])
                            }
                        });

                        this.$http.post(Api.saveOrUpdateFillItem, updateDatas).then((res) => {
                            this.$Message.success("保存成功")
                            this.fillModel = false;
                            this.queryFillDetail();
                            this.$Spin.hide();
                        }).catch(e => {
                            this.fillModel = false;
                            this.queryFillDetail();
                            this.$Spin.hide();
                            this.$Message.error("数据保存失败")
                        })
                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })
            },
            toEditFill(data){
                 this.$http.get(Api.getFillItemById +data.fillItemId).then((res) => {
                     if(res.data.fillItem!=null){
                         let item = res.data.fillItem;
                         this.fillFormData = item;
                         if("1000001013000000010" == item.dataType){
                              this.showUrl = true;
                              this.showCodeUrl = false;
                          }else if("1000001013000000009" == item.dataType){
                               this.showUrl = false;
                               this.showCodeUrl = true;
                          }else{
                             this.showUrl = false;
                             this.showCodeUrl = false;
                          }
                     }
                     if(res.data.dataCheck!=null){
                          let dataCheck = res.data.dataCheck;
                          this.dataCheckForm = dataCheck;
                      }
                 }, function () {
                     this.$Message.info('获取信息失败');
                 });
                 this.fillModel=true;
                 this.fillFormShow = true;
            },
            deleteFill(data){
                this.$Spin.show({
                    render: (h) => {
                        return h('div', [
                            h('Icon', {
                                'class': 'demo-spin-icon-load',
                                props: {
                                    type: 'ios-loading',
                                    size: 18
                                }
                            }),
                            h('div', 'Loading')
                        ])
                    }
                });
                 this.$http.get(Api.deleteFillItem,{params: {fillItemId : data.fillItemId}}).then((res) => {
                     this.$Message.success("删除成功");
                     this.fillModel = false;
                     this.queryFillDetail();
                     this.$Spin.hide();
                 }).catch(e => {
                     this.fillModel = false;
                     this.queryFillDetail();
                     this.$Spin.hide();
                     this.$Message.error("数据删除失败");
                 })
            },
            batDeleteFillItem(){
                 let ids = "";
                 this.checkFillDatas.forEach((item)=>{
                     ids = ids + item + ';';
                 })
                 ids = ids.substring(0,ids.length-1);
                 if(ids == ""){
                     this.$Message.warning('请先选择采集项!');
                 }else{
                     this.$Spin.show({
                         render: (h) => {
                             return h('div', [
                                 h('Icon', {
                                     'class': 'demo-spin-icon-load',
                                     props: {
                                         type: 'ios-loading',
                                         size: 18
                                     }
                                 }),
                                 h('div', 'Loading')
                             ])
                         }
                     });
                    this.$http.get(Api.deleteFillItem,{params: {fillItemId : ids}}).then((res) => {
                         this.$Message.success("删除成功");
                         this.fillModel = false;
                         this.checkFillDatas = [];
                         this.queryFillDetail();
                        this.$Spin.hide();
                     }).catch(e => {
                         this.fillModel = false;
                         this.checkFillDatas = [];
                         this.queryFillDetail();
                         this.$Spin.hide();
                         this.$Message.error("数据删除失败");
                     })
                 }
            },
            queryFillDetail() {
                let url = Api.getFillItemByModelVersionId + this.modelVersionId;
                this.$http.get(url, {params: {}}).then((res) => {
                    let dataTableDetail = res.data;
                    let rowNum = dataTableDetail.length / 3;
                    this.fillDataList = [];
                    for (let i=0; i < rowNum; i++) {
                        this.fillDataList[i] = [];
                        for(let j = 0; j < dataTableDetail.length - i * 3; j ++){
                            let flag = (j + 1) % 3;
                            let index = i * 3 + j;
                           this.fillDataList[i].push(dataTableDetail[index]);
                            if(flag == 0 ){
                                break;
                            }
                        }
                    }
                    //如果最后一行不满3个，添加空数据补满
                    if(this.fillDataList.length>0){
                        let diff = 3 - this.fillDataList[this.fillDataList.length-1].length;
                        for(let i = 0; i < diff;i++){
                            this.fillDataList[this.fillDataList.length-1].push({});
                        }
                    }
                }).catch(e => {
                    console.log(e)
                    this.$Message.error("数据获取失败")
                })
            }
        },
        components: {
        }
    };
</script>
<style lang='css' scoped>

    @import './../../../../index.css';
    .demo-split{
        width: 100%;height:500px;
        overflow: hidden;
    }
    .demo-split-pane{
        height:100%;
    }
    .modelSub {
        background-color: #ffffff;
        overflow-y:auto;
        overflow-x:hidden;
    }
    .modelSub .left{
        float: left;
        padding-left: 20px;
        font-size:16px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:48px;
    }
    .modelSub .right{
        margin-top:10px;
        float: right;
    }

    .modelSub .subleft{
        float: left;
        padding-left: 20px;
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:48px;
    }
    .modelSub .subright{
        float: right;
    }

    .detailRow1{
        margin-left: 20px;
        margin-right: 10px;
        border: 1px solid #E0E0EC;
        font-size:12px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:48px;
    }

    .detailRow2{
        background:rgba(248,248,249,1);
        margin-left: 20px;
        margin-right: 10px;
        border-right: 1px solid #E0E0EC;
        border-left: 1px solid #E0E0EC;
        border-bottom:  1px solid #E0E0EC;
        font-size:12px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:48px;
    }
     .ivu-btn-delete {
        background: #ffffff;
        height: 30px;
        border: 1px solid rgba(220, 222, 226, 1);
        border-radius: 4px;
        color: #333333;
        font-size: 14px;
        font-family: Microsoft YaHei;
        margin-top: 10px;
    }

     .ivu-btn-delete:hover {
        height: 30px;
        background: #FFFFFF;
        border: 1px solid #F27874;
        border-radius: 4px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #F27874;
    }

</style>
